<template>
  <div>
    <AddCreativePackage
      :creativeType="creativeType"
      ref="addCreativesRef"
      :maxPackageCount="5"
      :materialTypes="materialTypes"
      :tipTextConfig="tipTextConfig"
      @save="saveCreatives"
      :allowChangeCover="false"
    />
  </div>
</template>

<script setup lang="ts">
import AddCreativePackage from "@/pages/NewBatchCreateAd/components/creatives/AddCreativePackage.vue";
import { ref, onMounted } from "vue";
const creativeType = ref("自定义创意");
const addCreativesRef = ref();

const materialTypes = ref([
  {
    type: "largePic",
    name: "大图",
    filter: [
      {
        field: "height",
        operator: ">=",
        value: 1000
      },
      {
        field: "width",
        operator: ">=",
        value: 1000
      },
    ],
  },
  { type: "singlePic", name: "小图" },
  { type: "package3Pic", name: "组图" },
  { type: "verticalVideos", name: "竖版视频" },
  { type: "horizontalVideos", name: "横版视频" },
]);

// 素材提示文本配置
const tipTextConfig = ref({
  largePic: ["宽高比16:9", "尺寸>=960×540", "JPG、JPEG、PNG格式", "<500KB"],
  singlePic: ["宽高比3:2", "尺寸>=480×320", "JPG、JPEG、PNG格式", "<500KB"],
  package3Pic: ["宽高比3:2", "尺寸>=480×320", "JPG、JPEG、PNG格式", "<500KB"],
  verticalVideos: ["宽高比9:16", "尺寸>=540×960", "4~120秒", "<50MB", "MP4格式，需要有声音", "封面尺寸与视频一致，<500KB"],
  horizontalVideos: ["宽高比16:9", "尺寸>=960×540", "4~120秒", "<50MB", "MP4格式，需要有声音", "封面尺寸与视频一致，<500KB"],
});

const saveCreatives = (creativePackage: any) => {
  const targetStructure = creativePackage;
  console.log(targetStructure);
};

onMounted(() => {
  addCreativesRef.value?.show();
});
</script>

<style scoped></style>
